<template>
  <div>
    <div><el-tag>经纬度:{{seaAreaPosition}}</el-tag></div>
    <div><el-tag>地址:{{seaAreaPositionSrt}}</el-tag></div>
  </div>
  <div>
    <search @searchPlaceInput="getChild"></search>
  </div>
  <div id="container" >

  </div>

</template>

<script>
import search from "./search.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import Search from "./search.vue";
window._AMapSecurityConfig = {
  securityJsCode: '11928c7ed411dab464a07ad4532a3676'
}
export default {
  name: "MapContainer",
  components: {Search},
  data() {
    return {
      map:null,
      autoOptions: {
        input: ''
      },
      searchPlaceInput: '',
      auto: null,
      placeSearch:null,
      seaAreaPositionSrt:'',//传递给后端的地址名称
      seaAreaPosition:''//传递给后端的坐标
    }
  },
  methods:{
    initMap(){
      AMapLoader.load({
        key:"8d8fd73c8ff760c9ef372c9cb705e6ff",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
          'AMap.Geolocation','AMap.AutoComplete','AMap.PlaceSearch','AMap.ElasticMarker','AMap.Geocoder'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom:8,           //初始化地图级别
          center:[121.618622,38.91459], //初始化地图中心点位置
        });
        //创建插件列表对象
        this.map.addControl(new AMap.Scale())
        this.map.addControl(new AMap.ToolBar())
        this.map.addControl(new AMap.HawkEye())
        this.map.addControl(new AMap.MapType())
        this.map.addControl(new AMap.Geolocation())
        this.auto = new AMap.AutoComplete(this.autoOptions)
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        }) //构造地点查询类
        this.auto.on('select', this.select)
        //添加鼠标点击事件
        this.map.on('click',(e)=>{
          let lng = e.lnglat.lng;
          let lat = e.lnglat.lat;
          //调用逆向地理编码函数
          this.getLnglat(lng,lat)
        })

        //创建固定的点标记
        let marker1 = new AMap.Marker({
          position: new AMap.LngLat(121.618622,38.91459),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '大连'
        })
        //将固定的点标记添加到地图中
        this.map.add(marker1)

      }).catch(e=>{
        console.log(e);
      })
    },
     getChild(data){
      // const rawData = toRaw(data)
      // this.autoOptions.input = rawData.inputId
      //  console.log(toRaw(data))
      //  console.log( this.autoOptions.input)
      //  console.log(data)
       if(data!=null){
         this.autoOptions.input = data.inputId
         this.searchPlaceInput = data.userInput
       }

       // console.log(this.searchPlaceInput)
    },
    select(e) {
      // console.log(e)
      if(e!=null){
        this.placeSearch.setCity(e.poi.adcode)
        this.placeSearch.search(e.poi.name) //关键字查询查询
      }
    },
    //逆向地理编码
    getLnglat(lng,lat){
      let lnglat = new AMap.LngLat(lng,lat)
      let geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        city: '全国'
        //3.根据地图信息（地址）进行搜索获取详细信息
      })
      //1.点击地图任意位置生成一个marker
      let marker = new AMap.Marker({
        position: new AMap.LngLat(lng,lat)
      })
      this.map.add(marker)
      //2.将位置转化为坐标点-->地理信息
      geocoder.getAddress(lnglat,(status,result)=>{
        if (status === 'complete' && result.regeocode){
          let address = result.regeocode.formattedAddress//获取到位置名称
          this.seaAreaPositionSrt=address;
          this.seaAreaPosition = lng+','+lat
          // console.log(address)
        } else {
          log.error('根据经纬度查询地址失败')
        }
      })
    }


  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
    this.getChild()
  },
  created() {
    // bus.$on('shareSearchInput',val =>{
    //   this.autoOptions.input = val.inputId
    // })

  },
   watch: {
    searchPlaceInput(newValue) {
      if (newValue != null) {
        this.placeSearch.search(newValue)
      }
    }
  }


}
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 900px;
  height: 500px;
}
</style>